<template>
	<view class="container">
		<!-- 使用z-paging-swiper为根节点可以免计算高度 -->
		<z-paging-swiper>
			<!-- 需要固定在顶部不滚动的view放在slot="top"的view中 -->
			<template #top>
				<navigationBar :title="typeName" :isFixed="false"></navigationBar>
        <z-tabs 
          ref="tabs" 
          :current="isChangeTag" 
          :list="dataList.typeList" 
          @change="tabsChange" 
          :barWidth="'26rpx'" 
          :activeColor="'#16DFF2'" 
          :activeStyle="activeStyle"
          :inactiveStyle="inactiveStyle"
        />
        <!-- 筛选 -->
        <view :class="['filter',isChangeFilter === 1||isChangeFilter === 2||isChangeFilter === 3 ? 'change-fineness' : '']">
          <view class="filter-header">
            <text>综合</text>
            <view @click="priceSort">
              <text>价格</text>
              <image v-if="priceSortIndex === 0" src="../../static/shopDetails/price.svg" mode="" />
              <!-- 升序 -->
              <image v-if="priceSortIndex === 1" src="../../static/shopDetails/price-top.svg" mode="" />
              <!-- 降序 -->
              <image v-if="priceSortIndex === 2" src="../../static/shopDetails/price-bottom.svg" mode="" />
            </view>
            <view @click="changeFiltratePopup">
              <text>筛选</text>
              <image src="../../static/shopDetails/filtrate.svg" mode="" />
            </view>
          </view>
          <!-- 成色价格选择 -->
          <view class="filter-change">
            <view @click="changeFilter(1)" :class="[isChangeFilter === 1 ? 'change-filter' : '']">
              <text>成色</text>
              <image v-if="isChangeFilter === 1" src="../../static/shopDetails/top.svg" mode="" />
              <image v-else src="../../static/shopDetails/bottom.svg" mode="" />
            </view>
            <view @click="changeFilter(2)" :class="[isChangeFilter === 2 ? 'change-filter' : '']">
              <text>价格</text>
              <image v-if="isChangeFilter === 2" src="../../static/shopDetails/top.svg" mode="" />
              <image v-else src="../../static/shopDetails/bottom.svg" mode="" />
            </view>
            <view @click="changeFilter(3)" :class="[isChangeFilter === 3 ? 'change-filter' : '']">
              <text>品牌</text>
              <image v-if="isChangeFilter === 3" src="../../static/shopDetails/top.svg" mode="" />
              <image v-else src="../../static/shopDetails/bottom.svg" mode="" />
            </view>
          </view>
          <!-- 成色选择  刚开始隐藏了 -->
          <view class="fineness" v-if="isChangeFilter === 1">
            <view class="fineness-title">成色选择</view>
            <view class="fineness-list">
              <view 
                :class="['fineness-item',finenessIndex === item.id ? 'ischange' : '']" 
                v-for="(item) in dataList.finenessList" 
                :key="item.id"
                @click="changeFineness(item.id)"
              >{{item.content}}</view>
            </view>
            <view class="fineness-btn">
              <view @click="reset(1)">重置</view>
              <view @click="confim">确定</view>
            </view>
          </view>
          <!-- 价格选择  刚开始隐藏了 -->
          <view class="fineness" v-if="isChangeFilter === 2">
            <view class="fineness-title">价格区间</view>
            <view class="section">
              <view class="section-price">
                <uni-easyinput 
                  v-model="minPrice" 
                  placeholder="最低价格" 
                ></uni-easyinput>
                <view class="section-yuan">¥</view>
              </view>
              <view class="section-to"></view>
              <view class="section-price">
                <uni-easyinput 
                  v-model="maxPrice" 
                  placeholder="最高价格" 
                ></uni-easyinput>
                <view class="section-yuan">¥</view>
              </view>
            </view>
            <view class="fineness-list">
              <view 
                v-for="(item,index) in dataList.priceList" 
                :key="index" 
                :class="['fineness-item',priceIndex === index ? 'ischange' : '']"
                @click="changePrice(item,index)"
              >
                <text v-if="item.max">{{item.min}} ~ {{item.max}}</text>
                <text v-else>{{item.min}}以上</text>
              </view>
            </view>
            <view class="fineness-btn">
              <view @click="reset(2)">重置</view>
              <view @click="confim">确定</view>
            </view>
          </view>
          <!-- 品牌选择  刚开始隐藏了 -->
          <view class="fineness" v-if="isChangeFilter === 3">
            <view class="fineness-title">品牌选择</view>
            <view class="fineness-list">
              <view 
                :class="['fineness-item',brandIndex === item.id ? 'ischange' : '']" 
                v-for="(item) in dataList.brandList" 
                :key="item.id"
                @click="changeBrand(item.id)"
              >{{item.name}}</view>
            </view>
            <view class="fineness-btn">
              <view @click="reset(3)">重置</view>
              <view @click="confim">确定</view>
            </view>
          </view>
        </view>
			</template>
			<!-- swiper必须设置height:100%，因为swiper有默认的高度，只有设置高度100%才可以铺满页面  -->
			<swiper class="swiper" :current="isChangeTag" @animationfinish="swiperChange">
				<swiper-item class="swiper-item" v-for="(item,index) in dataList.typeList" :key="index">
					<swiperListItem
            ref="swiperItemsRef"
            :tabIndex="index" 
            :currentIndex="isChangeTag" 
            :typeId="item.id" 
            :typeIdList="dataList.typeIdList"
            :priceSortIndex="priceSortIndex"
            :finenessIndex="finenessIndex"
            :minPrice="minPrice"
            :maxPrice="maxPrice"
            :brandIndex="brandIndex"
          ></swiperListItem>
				</swiper-item>
			</swiper>
      <!-- 蒙层 -->
      <view class="bg" v-if="isChangeFilter !== 0" @click="closePopup"></view>
		</z-paging-swiper>
    <!-- 底部安全区域 -->
		<view class="safe-padding"></view>

    <!-- 更多筛选弹窗 -->
    <popup ref="filtratePopupRef" title="更多筛选">
      <view class="dialog-content fineness">
        <view class="fineness-title first">成色区间</view>
        <view class="fineness-list">
          <view 
            :class="['fineness-item',finenessIndex === item.id ? 'ischange' : '']" 
            v-for="(item) in dataList.finenessList" 
            :key="item.id"
            @click="changeFineness(item.id)"
          >{{item.content}}</view>
        </view>
        <view class="fineness-title">价格区间</view>
        <view class="section">
          <view class="section-price">
            <uni-easyinput 
              v-model="minPrice" 
              placeholder="最低价格" 
            ></uni-easyinput>
            <view class="section-yuan">¥</view>
          </view>
          <view class="section-to"></view>
          <view class="section-price">
            <uni-easyinput 
              v-model="maxPrice" 
              placeholder="最高价格" 
            ></uni-easyinput>
            <view class="section-yuan">¥</view>
          </view>
        </view>
        <view class="fineness-list">
          <view 
            v-for="(item,index) in dataList.priceList" 
            :key="index" 
            :class="['fineness-item',priceIndex === index ? 'ischange' : '']"
            @click.stop="changePrice(item,index)"
          >
            <text v-if="item.max">{{item.min}} ~ {{item.max}}</text>
            <text v-else>{{item.min}}以上</text>
          </view>
        </view>
        <view class="fineness-title">品牌选择</view>
        <view class="fineness-list">
          <view 
            :class="['fineness-item',brandIndex === item.id ? 'ischange' : '']" 
            v-for="(item) in dataList.brandList" 
            :key="item.id"
            @click="changeBrand(item.id)"
          >{{item.name}}</view>
        </view>
        <view class="fineness-btn">
          <view @click="reset(0)">重置</view>
          <view @click="confim">确定</view>
        </view>
      </view>
    </popup>
	</view>
</template>

<script setup>
  import { onMounted, ref,reactive } from 'vue'
  import {onLoad,onReachBottom} from "@dcloudio/uni-app";
  import {goodsSearchCriteria} from '@/api/shop'
  import swiperListItem from './swiperListItem.vue'

	import { useSystemInfoStore } from '@/stores/systemInfo'
	const {statusBarHeight} = useSystemInfoStore()

  const filtratePopupRef = ref(null)
  const typeId = ref(0)
  const typeName = ref('')
  const isChangeTag = ref(0)

  const isChangeFilter = ref(0)  //选择的是成色还是价格 0 都没选择  1成色  2价格  3品牌
  const finenessIndex = ref(-1) //成色选择的id  -1都没选择
  const priceIndex = ref(-1)  //价格区间选择
  const priceSortIndex = ref(0)  // 价格排序 0默认  1升序  2降序
  const brandIndex = ref(-1)   //品牌选择的id   -1都没选择
  const minPrice = ref('')  //最低价格
  const maxPrice = ref('')  //最高价格

  const swiperItemsRef = ref(null);

  const activeStyle = reactive({
    color: '#111111',
    fontSize: '28rpx',
    fontWeight: 500
  })
  const inactiveStyle = reactive({
    color: '#333333',
    fontSize: '28rpx',
    fontWeight: 400
  })


  const dataList = reactive({
    typeList:[],
    typeIdList:[],//装typeid的集合 用于给swiper 传参
    brandList:[],
    finenessList:[],
    priceList:[
      {
        min:0,
        max:999
      },
      {
        min:1000,
        max:1999
      },
      {
        min:2000,
        max:4999
      },
      {
        min:5000,
        max:9999
      },
      {
        min:10000,
        max:19999
      },
      {
        min:20000,
        max:''
      },
    ]
  })

  onLoad(({id,names}) => {
    // console.log('分类详情id',id)
    typeId.value = id
    typeName.value = names
  })

  onMounted(() => {
    getChildByType()
  })

  //价格排序
  const priceSort = () => {
    if (priceSortIndex.value === 0 || priceSortIndex.value === 2){
      priceSortIndex.value = 1
    }else if(priceSortIndex.value === 1){
      priceSortIndex.value = 2
    }
    // swiperItemsRef.value[current.value].reload(() => {
		// 	// 当当前显示的列表刷新结束，结束当前页面的刷新状态
		// 	pagePaging.value.complete([]);
		// });
    console.log('swiperItemsRef',swiperItemsRef)
    swiperItemsRef.value[isChangeTag.value].reload()
  }
  //点击筛选
  const changeFiltratePopup = () => {
    isChangeFilter.value = 0
    filtratePopupRef.value.open()
  }

  const changeFilter = (v) => {
    if(isChangeFilter.value === v){
      isChangeFilter.value = 0
      return;
    }
    isChangeFilter.value = v
  }

  const closePopup = () => {
    isChangeFilter.value = 0
  }

  //成色选择
  const changeFineness = (id) => {
    finenessIndex.value = id
  }

  //价格选择
  const changePrice = (item,index) => {
    priceIndex.value = index
    minPrice.value = item.min + ''
    maxPrice.value = item.max + ''
  }

  //品牌选择
  const changeBrand = (id) => {
    brandIndex.value = id
  }

  //选择确定
  const confim = () => {
    // getGoodsSame()
    // closePopup()
    isChangeFilter.value = 0
    filtratePopupRef.value.close()
    swiperItemsRef.value[isChangeTag.value].reload()
  }

  //重置
  const reset = (type) => {
    if(type === 0){
      //全部清空
      finenessIndex.value = -1
      priceIndex.value = -1
      minPrice.value = ''
      maxPrice.value = ''
      brandIndex.value = -1
    }else if(type === 1){
      //清空成色
      finenessIndex.value = -1
    }else if(type === 2){
      //清空价格
      priceIndex.value = -1
      minPrice.value = ''
      maxPrice.value = ''
    }else if(type === 3){
      //清空品牌
      brandIndex.value = -1
    }
  }

  //sqiper滚动
  const swiperChange = (e) => {
		// console.log('swiperChange',e.detail.current);
		const current = e.detail.current
		isChangeTag.value = current
    finenessIndex.value = -1
    priceIndex.value = -1
    minPrice.value = ''
    maxPrice.value = ''
    brandIndex.value = -1
    priceSortIndex.value = 0
	}

  const tabsChange = (index) => {
		// console.log('tabsChange',index)
    isChangeTag.value = index
    finenessIndex.value = -1
    priceIndex.value = -1
    minPrice.value = ''
    maxPrice.value = ''
    brandIndex.value = -1
    priceSortIndex.value = 0
	}
  
  const getChildByType = async () => {
    let res = await goodsSearchCriteria({typeId:typeId.value})
    res.type.forEach(item => {
      dataList.typeIdList.push(item.id)
    })
    // console.log('分类详情res',res)
    dataList.typeList = [{id:0,name:'全部'},...res.type]
    dataList.brandList = res.brand
    dataList.finenessList = res.fineness

  }

</script>

<style lang='scss' scoped>
.container{
  width: 100vw;
  height: 100vh;
  background: #F4F3F7;
}

.swiper {
  height: 100%;
}

.bg{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8;
}

.filter{
  width: 100%;
  height: 160rpx;
  // height: 718rpx;
  background: white;
  // padding-top: calc(var(--status-bar-height) + 90rpx);
  overflow: hidden;
  // position: fixed;
  // top: calc(var(--status-bar-height) + 90rpx);
  // left: 0;
  // z-index: 9;
  border-top: 2rpx solid #F7F7F7;
  position: relative;
  z-index: 10;

  .filter-header{
    width: 100%;
    height: 82rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
    @include flex(row,space-between);

    >text{
      font-weight: 500;
      font-size: 26rpx;
      color: #111111;
    }
    >view{
      @include flex(row,flex-start,center);
      >text{
        font-weight: 400;
        font-size: 26rpx;
        color: #666666;
      }
      >image{
        width: 34rpx;
        height: 34rpx;
        margin-left: 6rpx;
      }
    }
  }

  .filter-change{
    height: 60rpx;
    padding-left: 30rpx;
    padding-bottom: 18rpx;
    @include flex(row,flex-start);

    >.change-filter{
      background: rgba(22,223,242,0.13);
      border: 2rpx solid #16DFF2;

      >text{
        font-weight: 500;
        font-size: 22rpx;
        color: #111111;
      }
    }

    >view{
      width: 214rpx;
      height: 60rpx;
      background: #F4F3F7;
      border-radius: 30rpx;
      padding: 0 30rpx;
      box-sizing: border-box;
      margin-right: 24rpx;
      box-sizing: border-box;
      @include flex(row,space-between);

      >text{
        font-weight: 400;
        font-size: 22rpx;
        color: #666666;
      }
      >image{
        width: 16rpx;
        height: 16rpx;
      }

    }
  }

}

.change-fineness{
  // height: 718rpx;
  overflow: visible;
}

.fineness{
  width: 690rpx;
  // height: 560rpx;
  background: #FFFFFF;
  border-radius: 0rpx 0rpx 4rpx 4rpx;
  padding:0 30rpx;


  .fineness-title{
    padding: 40rpx 0;
    font-weight: 500;
    font-size: 28rpx;
    color: #111111;
  }
  .fineness-list{
    width: 100%;
    @include flex(row,space-between,flex-start,wrap);

    .fineness-item{
      width: 214rpx;
      height: 88rpx;
      background: #F7F7F7;
      border-radius: 4rpx;
      font-weight: 500;
      font-size: 28rpx;
      color: #222222;
      flex-shrink: 0;
      margin-bottom: 24rpx;
      @include flex();
    }

    .ischange{
      color: #16DFF2;
    }
  }

  .fineness-btn{
    width: 690rpx;
    padding:72rpx 0 48rpx 0;
    @include flex(row,space-between);

    >view{
      width: 336rpx;
      height: 92rpx;
      border-radius: 4rpx;
      border: 2rpx solid #D9D9D9;
      font-weight: 400;
      font-size: 28rpx;
      color: #666666;
      box-sizing: border-box;
      @include flex();
    }

    >view:last-child{
      background: #16DFF2;
      color: #FFFFFF;
    }

  }

  .section{
    width: 100%;
    height: 88rpx;
    margin-bottom: 24rpx;
    @include flex(row,space-between);

    .section-price{
      width: 320rpx;
      height: 88rpx;
      position: relative;

      .section-yuan{
        width: 30rpx;
        height: 88rpx;
        line-height: 88rpx;
        color: #BFBFBF;
        position: absolute;
        left: 30rpx;
        top: 0rpx;
        font-weight: 600;
      }
    }

    ::v-deep .uni-easyinput{
      width: 100% !important;
    }

    ::v-deep .uni-easyinput__content-input{
      padding-left:70rpx !important;
      height: 88rpx !important;
      font-weight: 400;
      font-size: 28rpx;
      background-color: #F7F7F7;
    }

    ::v-deep .uni-easyinput__content{
      background-color: #F7F7F7 !important;
    }

    ::v-deep .uni-easyinput__placeholder-class{
      font-weight: 400;
      font-size: 28rpx;
      color: #CCCCCC;
    }

    ::v-deep .is-input-border{
      border: none !important;
    }

    ::v-deep .uni-icons{
      color: #D8D8D8 !important;
      font-size: 20px !important;
    }

    .section-to{
      width: 20rpx;
      height: 6rpx;
      background: #BFBFBF;
    }
  }
}

.dialog-content{
  .fineness-title{
    padding-top: 28rpx !important;
    padding-bottom: 52rpx !important;
  }
  .first{
    padding-top: 0 !important;
  }
}

//没有更多了  文字的下边距
::v-deep .zp-l-container{
	padding-bottom: constant(safe-area-inset-bottom) !important;
	padding-bottom: env(safe-area-inset-bottom) !important;
}

</style>